<template>
  <div class="common_page">
    <div ref="mainContent" class="main_content">
      <div class="main_content_content">
        <div class="main_content_title">生产排程详情</div>
        <div class="app-container">
          <div ref="gantt" class="left-container"/>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {schedulingDetail} from '../api/product/index'
import gantt from 'dhtmlx-gantt'  // 引入模块
//import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
import 'dhtmlx-gantt/codebase/skins/dhtmlxgantt_terrace.css' //皮肤
import 'dhtmlx-gantt/codebase/locale/locale_cn'  // 本地化
import 'dhtmlx-gantt/codebase/ext/dhtmlxgantt_tooltip.js' //任务条悬浮提示

export default {
  name: 'gantt',
  data() {
    return {
      tasks: {
        data: [],

      },
      editDialogInfo: {
        currPage: 1,
        pageSize: 10,
        number: ''
      },
    }
  },

  mounted() {
    this.editDialogInfo.number = this.$route.query.userId || ''
    this.getDetail()

  },
  methods: {
    //开始时间-结束时间参数
    DateDifference: function (strDateStart, strDateEnd) {
      var begintime_ms = Date.parse(new Date(strDateStart.replace(/-/g, '/'))) //begintime 为开始时间
      var endtime_ms = Date.parse(new Date(strDateEnd.replace(/-/g, '/')))   // endtime 为结束时间
      var date3 = endtime_ms - begintime_ms //时间差的毫秒数
      var days = Math.floor(date3 / (24 * 3600 * 1000))
      return days
    },
    getDetail() {
      schedulingDetail(this.editDialogInfo).then(res => {
        this.tasks.data = res.data.list.map(function (current, ind, arry) {
          var newObj = {}
          if (current.type) { //存在type字段 说明非一级菜单，判断阶段的具体类型 设置不同颜色
            newObj.text = current.planNumber
            newObj.start_date = current.batchBeginDate
            newObj.end_date = current.batchEndDate
            newObj.toolTipsTxt = current.planName
            newObj.id = Math.random()
            newObj.parent = current.parent
            newObj.duration = (current.planHour / 24).toFixed(1)
            newObj.type = current.type
            newObj.principal = current.principal
            if (newObj.type == 1) { //冒烟
              newObj = Object.assign(newObj, {'color': '#3399FF'})
            } else if (newObj.type == 2) { //单元
              newObj = Object.assign(newObj, {'color': '#FF7733 '})
            } else if (newObj.type == 3) { //回归
              newObj = Object.assign(newObj, {'color': '#00B24A'})
            }
          } else { //一级菜单是蓝色的
            newObj.text = current.planNumber
            newObj.start_date = current.batchBeginDate
            newObj.end_date = current.batchEndDate
            newObj.toolTipsTxt = current.planName
            newObj.id = current.id
            newObj.parent = current.parent
            newObj.duration = (current.batchHour / 24).toFixed(1)
            newObj.type = current.type
            newObj.principal = current.principal
            newObj = Object.assign(newObj, {'color': '#3399FF'})
          }

          return newObj
        })
        this.initGan()
      })
    },
    initGan() {
      /*
    * 冒烟：fcca02    单元：fec0dc     回归：62ddd4   阶段：d1a6ff
    * */
      //设置图表区域的日期坐标最大值 var date = new Date(dateString.replace(/-/,"/"))
      //  gantt.config.start_date = new Date("2020-04-08".replace(/-/,"/")) ;
      //gantt.config.end_date = new Date("2020-04-18".replace(/-/,"/")) ; //结束时间需要+1天

      //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
      gantt.config.autosize = false
      //只读模式
      gantt.config.readonly = false
      //是否显示左侧树表格
      gantt.config.show_grid = true
      //表格列设置
      gantt.config.columns = [
        {name: 'text', label: '批次', tree: true, width: '120'},
        {
          name: 'start_date',
          label: '开始时间',
          // tree: true,
          width: '100'
        },
        {
          name: 'end_date',
          label: '结束时间',
          width: '100'
        },
        {
          name: 'type',
          label: '状态',
          width: '100'
        },
        {
          name: 'principal',
          label: '负责人',
          align: 'center',
          width: '80'
        },
        /*{name:"start_date", label:"开始时间", align: "center" },

        {name:"end_date",   label:"结束时间",   align: "center" },*/
      ]
      //时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
      gantt.config.show_task_cells = true

      //设置x轴日期
      gantt.config.scale_unit = 'day'
      gantt.config.step = 1
      gantt.config.date_scale = '星期' + '%D'

      //当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
      gantt.config.fit_tasks = true
      // 在时间线上增加一行显示星期
      gantt.config.subscales = [
        //{unit:"day",  step:1, date:"星期"+"%D" },
        {unit: 'day', step: 1, date: '%M' + '%d' + '日'}
      ]
      //时间轴图表中，任务条形图的高度
      gantt.config.task_height = 28
      //时间轴图表中，甘特图的高度
      gantt.config.row_height = 36
      //从后端过来的数据格式化
      gantt.config.xml_date = '%Y-%m-%d'
      //任务条显示内容
      gantt.templates.task_text = function (start, end, task) {
        return task.text + '(' + task.duration + '天)'
      }
      // gantt.templates.task_class = function(start, end, task){return "xx";};
      //悬浮
      gantt.templates.tooltip_text = function (start, end, task) {
        //return "<b>任务名称:</b> "+task.text+"<br/><b>时长:</b> " + task.duration+"<br/><b>说明:</b>" +task.toolTipsTxt;
        return '<span style=\'font-size: 14px\'>' + task.toolTipsTxt + '</span>'
      }

      gantt.templates.scale_cell_class = function (date) {
        /*if(date.getDay()== 0 || date.getDay()== 6){
          return "weekend";
        }*/
        return 'weekend'
      }
      //任务栏周末亮色
      /*gantt.templates.task_cell_class = function(item,date){
        if(date.getDay()== 0 || date.getDay()== 6){
          return "weekend";
        }
      };*/
      //任务条上的文字大小 以及取消border自带样式
      gantt.templates.task_class = function (start, end, item) {
        return item.$level == 0 ? 'firstLevelTask' : 'secondLevelTask'
      }
      // 初始化
      gantt.init(this.$refs.gantt)
      // 数据解析
      gantt.parse(this.tasks)
    }
  }
}
</script>

<style lang="scss" scoped>
.common_page {
  height: 100%;
  width: 100%;
  background: #f3f4f5;
  overflow: auto;
}

.main_content {
  padding: 16px 20px;
}

.main_content_content {
  padding: 20px;
  background: #fff;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.02), 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
  border-radius: 8px;

  .main_content_title {
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    color: #333;
    font-weight: 600;
    line-height: 30px;
    font-size: 20px;
  }
}

.firstLevelTask {
  border: none;

  .gantt_task_content {
    // font-weight: bold;
    font-size: 13px;
  }
}

.secondLevelTask {
  border: none;
}

.thirdLevelTask {
  border: 2px solid #da645d;
  color: #da645d;
  background: #da645d;
}

.milestone-default {
  border: none;
  background: rgba(0, 0, 0, 0.45);
}

.milestone-unfinished {
  border: none;
  background: #5692f0;
}

.milestone-finished {
  border: none;
  background: #84bd54;
}

.milestone-canceled {
  border: none;
  background: #da645d;
}

html, body {
  margin: 0px;
  padding: 0px;
  height: 100%;
  overflow: hidden;
}

.container {
  height: 900px;

  .left-container {
    height: 100%;
  }
}

.left-container {
  height: 600px;
}

.gantt_scale_line {
  border-top: 0;
}

.weekend {
  //background:#f4f7f4!important;
  color: #000000 !important;
}

.gantt_selected .weekend {
  background: #f7eb91 !important;;
}

.gantt_task_content {
  text-align: left;
  padding-left: 10px;
}

//上面任务条样式
.gantt_task_scale {
  height: 45px !important;
}

.gantt_task .gantt_task_scale .gantt_scale_cell {
  line-height: 30px !important;
  height: 28px !important;
}
</style>
